<template>
  <div class="div1">
    <div class="div1-1">
      <div class="butten1">
        <el-button size="small" style="width: 200px" @click="dialog()"
          >新增收货地址</el-button
        >
      </div>
    </div>
    <!-- 主体显示 -->
    <div class="div1-2">
      <el-card class="box-card" v-for="(a, index) in form" :key="index">
        <div slot="header" class="clearfix">
          <el-badge :value="a.Sdefault" class="item">
            <el-button disabled class="span1">{{ a.Aname }}</el-button>
          </el-badge>
          <div class="div1-3">
            <el-button
              type="text"
              icon="el-icon-star-off"
              @click="defau(a.Aid)"
            ></el-button>
            <el-button type="text" icon="el-icon-edit"></el-button>
            <el-button type="text" icon="el-icon-delete"></el-button>
          </div>
        </div>
        <div>
          <el-form ref="form" label-width="80px" size="mini" class="text">
            <el-form-item label="收货人:">
              {{ a.Aname }}
            </el-form-item>

            <el-form-item label="所在地区:">
              {{ a.dizhi }}
            </el-form-item>

            <el-form-item label="地址:">
              {{ a.Aadds }}
            </el-form-item>

            <el-form-item label="手机:">
              {{ a.Aphone }}
            </el-form-item>

            <el-form-item label="固定电话:">
              {{ a.Aph }}
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageindex"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalcount"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 模态添加 -->
    <el-drawer
      title="添加地址"
      :before-close="handleClose"
      :visible.sync="dialoga"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
      size="800px"
    >
      <div class="demo-drawer__content" style="margin-top: 20px;">
        <el-form :model="datapost">
          <el-form-item label="收件人" :label-width="formLabelWidth">
            <el-input v-model="datapost.Aname" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="手机号码" :label-width="formLabelWidth">
            <el-input v-model="datapost.Aphone" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="固定电话" :label-width="formLabelWidth">
            <el-input v-model="datapost.Aph" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item :label-width="formLabelWidth" label="收货地区">
            <el-select
              v-model="datapost.Asheng"
              placeholder="请选择"
              @change="getShi"
            >
              <el-option
                v-for="item in options1"
                :key="item.Jid"
                :label="item.Jname"
                :value="item.Jid"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="datapost.Ashi"
              placeholder="请选择"
              @change="getXian"
            >
              <el-option
                v-for="item in options2"
                :key="item.Jid"
                :label="item.Jname"
                :value="item.Jid"
              >
              </el-option>
            </el-select>

            <el-select v-model="datapost.Axian" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.Jid"
                :label="item.Jname"
                :value="item.Jid"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="详细地址" :label-width="formLabelWidth">
            <el-input v-model="datapost.Aadds" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="用户附言" :label-width="formLabelWidth">
            <el-input v-model="datapost.Atxt" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="送货时间" :label-width="formLabelWidth">
            <el-radio v-model="datapost.Atim" label="1">任意</el-radio>
            <el-radio v-model="datapost.Atim" label="2">周一至周五</el-radio>
            <el-radio v-model="datapost.Atim" label="2">周末</el-radio>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button
            type="primary"
            @click="$refs.drawer.closeDrawer()"
            :loading="loading"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script scoped>
export default {
  data() {
    return {
      form: {},
      datapost: {
        Aname: "",
        Aadds: "",
        Asheng: "",
        Ashi: "",
        Axian: "",
        Aphone: "",
        Aph: "",
      },
      pageindex: 1,
      pagesize: 3,
      totalcount: 0,
      dialoga: false,
      loading: false,
      formLabelWidth: "80px",
      timer: null,
      options: [],
      value: "",
      options1: [],
      options2: [],
      options3: [],
    };
  },
  methods: {
    showadds() {
      this.$axios
        .get("http://localhost:61983/api/Adds/shwoAdds?", {
          params: {
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          this.form = res.data.list;
          this.totalcount = res.data.totalcount;
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.showadds();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.showadds();
      console.log(`当前页: ${val}`);
    },
    defau(id) {
      this.$axios
        .get("http://localhost:61983/api/Adds/updefault?Aid=" + id)
        .then((res) => {
          if (res.data > 0) {
            this.$message({
              message: "已成功设置默认地址",
              type: "success",
            });
            this.showadds();
          } else {
            this.$message.error("当前已经为默认地址");
          }
        });
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定要提交表单吗？")
        .then(() => {
          console.log(this.datapost);
          this.$axios
            .post("http://localhost:61983/api/Adds/Addadds", this.datapost)
            .then((res) => {
              if (res.data > 0) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.loading = true;
                this.timer = setTimeout(() => {
                  done();
                  // 动画关闭需要一定的时间
                  setTimeout(() => {
                    this.loading = false;
                  }, 400);
                }, 2000);
              } else {
                this.$message.error("添加失败");
              }
            });
        })
        .catch(() => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialoga = false;
      clearTimeout(this.timer);
    },
    Adds() {
      this.$axios
        .post("http://localhost:61983/api/Adds/Addadds")
        .then((res) => {
          if (res.data > 0) {
            alert("添加成功!");
          } else {
            alert("添加失败!");
          }
        });
    },
    getSheng() {
      this.$axios
        .get("http://localhost:61983/api/Adds/GetSelect?lid=0")
        .then((res) => {
          this.options1 = res.data;
        });
    },
    getShi() {
      this.$axios
        .get(
          "http://localhost:61983/api/Adds/GetSelect?lid=" + this.datapost.Asheng
        )
        .then((res) => {
          this.options2 = res.data;
        });
    },
    getXian() {
      this.$axios
        .get(
          "http://localhost:61983/api/Adds/GetSelect?lid=" + this.datapost.Ashi
        )
        .then((res) => {
          this.options3 = res.data;
        });
    },
    dialog() {
      this.dialoga = true;
      this.getSheng();
    },
  },
  created() {
    this.showadds();
  },
};
</script>

<style>
.div1 {
  width: 1000px;
  height: 1000px;
  margin: 0 auto;
}
.div1-1 {
  width: 1000px;
  height: 50px;
}
.div1-2 {
  margin-top: 10px;
  width: 1000px;
}
.text {
  margin-top: 0px;
}
.span1 {
  font-weight: bold;
}
.box-card {
  margin-top: 10px;
  width: 100%;
}
.el-form-item {
  margin-top: -15px;
}
.butten1 {
  padding-top: 18px;
}
.span2 {
  margin-left: 30px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
}
.div1-3 {
  float: right;
}
</style>